<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="字典值列表"
      row-key="path"
      :indent="30"
      :request-api="getTableList"
      :columns="columns"
      :pagination="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增字典值 </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
    <DictDataDrawer ref="drawerDataRef" />
  </div>
</template>
<script setup lang="ts" name="dictDataMange">
import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { useRoute } from "vue-router";
import DictDataDrawer from "./detail.vue";
import { DictData, page, save, update } from "@/api/system/dictData";
const route = useRoute();
const typeCode = route.query?.typeCode as string;
const proTable = ref();

const getTableList = async (params: any) => {
  params.dictType = typeCode;
  return await page(params);
};
const drawerDataRef = ref<InstanceType<typeof DictDataDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<DictData.ReqDictData> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? save : title === "编辑" ? update : undefined,
    getTableList: proTable.value?.getTableList
  };
  if (title === "新增") {
    params.row.dictType = typeCode;
  }
  console.log("这");
  drawerDataRef.value?.acceptParams(params);
};

// 表格配置项
const columns: ColumnProps[] = [
  { type: "sort", label: "排序", width: 80 },
  { prop: "dictType", label: "字典类型", align: "left" },
  { prop: "label", label: "字典数据名" },
  { prop: "value", label: "字典数据值" },
  { prop: "createTime", label: "创建时间" },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
</script>
